import React, { Component } from 'react';
import { StyleSheet, Text,  View,TouchableOpacity } from 'react-native';
import {inject,observer } from "mobx-react";

@inject("rootStore") // 注入 用来获取 全局数据的
@observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
class YourComponent extends Component {

    constructor(props) {
        super(props);
        this.goIndex = this.goIndex.bind(this); // 手动绑定函数
    }
    goIndex(){
        const { navigation } = this.props; 
        navigation.navigate('index')
    }

    render() {
        // 通过 this.props.route.params 获取传递过来的参数对象
        const { data } = this.props.route.params;
        return (
            <View style={{flex: 1, alignItems: 'center',marginTop:20}}>
                <View style={{width:300}}>
                    <Text style={{fontSize: 40, fontWeight: 'bold',color:"black",marginTop:20,marginBottom:20}}>扫描结果：</Text>
                    <View
                        style={{
                            height:1,
                            width:300,
                            borderWidth: 2, // 边框宽度
                            borderColor: '#b8b8b8', // 边框颜色
                        }}
                        />
                    <Text style={styles.codeText}>条形码: {data.txm}</Text>
                    <Text style={styles.codeText}>品规名称: {data.pgmc}</Text>
                    <Text style={styles.codeText}>包装类型: {data.bzlx}</Text>
                    <View style={{ alignItems: 'center' }}>
                        <TouchableOpacity 
                            style={{ 
                            height: 40, 
                            width: 300,
                            backgroundColor: "#1da1f2",
                            borderRadius: 20, 
                            justifyContent: 'center', // 将文本内容水平居中
                            }}
                            onPress={this.goIndex} 
                            activeOpacity={0.8}
                        >
                            <Text style={{ textAlign: 'center', fontSize: 20, color: "#ffffff" }}>确定</Text>
                        </TouchableOpacity>
                    </View>

            </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    codeText:{
        fontSize: 20,
        marginTop:10,
    }
})

export default YourComponent;
